<template>
  <div id="app">
    <el-tabs
      v-model="activeName"
      style="display: flex; flex-direction: column; height: 100vh"
    >
      <el-tab-pane label="基础使用" name="basicUse">
        <ResourceTableBasicUseExample v-if="activeName === 'basicUse'" />
      </el-tab-pane>
      <el-tab-pane label="表头-自定义查询参数" name="topRight">
        <ResourceTableHeaderRight v-if="activeName === 'topRight'" />
      </el-tab-pane>
      <el-tab-pane label="表头-左侧添加按钮" name="topLeft">
        <ResourceTableHeaderLeft v-if="activeName === 'topLeft'" />
      </el-tab-pane>
      <el-tab-pane label="表格-多选列" name="selection">
        <ResourceTableSelection v-if="activeName === 'selection'" />
      </el-tab-pane>
      <el-tab-pane label="表格-状态列" name="status">
        <ResourceTableStatusColumn v-if="activeName === 'status'" />
      </el-tab-pane>
      <el-tab-pane label="表格-置顶列" name="topping">
        <ResourceTableToppingColumn v-if="activeName === 'topping'" />
      </el-tab-pane>
      <el-tab-pane label="表格-操作列" name="operation">
        <ResourceTableOperationColumn v-if="activeName === 'operation'" />
      </el-tab-pane>
      <el-tab-pane label="页脚" name="footer">
        <ResourceTableFooter v-if="activeName === 'footer'" />
      </el-tab-pane>
      <el-tab-pane label="全功能" name="full">
        <ResourceTableExample v-if="activeName === 'full'" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import ResourceTableExample from "./components/ResourceTableExample.vue";
import ResourceTableBasicUseExample from "./components/ResourceTableBasicUseExample";
import ResourceTableHeaderRight from "./components/ResourceTableHeaderRight";
import ResourceTableHeaderLeft from "./components/ResourceTableHeaderLeft";
import ResourceTableSelection from "./components/ResourceTableSelection";
import ResourceTableStatusColumn from "./components/ResourceTableStatusColumn";
import ResourceTableToppingColumn from "./components/ResourceTableToppingColumn";
import ResourceTableOperationColumn from "./components/ResourceTableOperationColumn";
import ResourceTableFooter from "./components/ResourceTableFooter";

export default {
  name: "App",
  components: {
    ResourceTableExample,
    ResourceTableBasicUseExample,
    ResourceTableHeaderRight,
    ResourceTableHeaderLeft,
    ResourceTableSelection,
    ResourceTableStatusColumn,
    ResourceTableToppingColumn,
    ResourceTableOperationColumn,
    ResourceTableFooter,
  },
  data() {
    return {
      activeName: "basicUse",
    };
  },
};
</script>

<style lang="scss">
body {
  width: 100vw;
  height: 100vh;
  margin: 0 !important;
  display: flex;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  height: 100%;
  width: 100%;
  padding: 0 5px;
}

.el-tabs__content {
  display: flex;
  flex: auto;
}

.el-tab-pane {
  position: absolute;
  width: 100%;
  height: 100%;
}
</style>
